Ajax(Asynchronous JavaScript and XML)

✒️ 2025-05-23 14:49 내용 수정

참고 자료 : TCPSchool ajax intro, TCPSchool ajax server response, TCPSchool ajax header response

Javascript를 이용한 백그라운드 비동기 통신

• 웹 페이지 전체를 다시 로딩하지 않아도 웹 페이지 일부분만을 갱신할 수 있도록 해준다.
• 서버와 Ajax간에는 JSON, XML, HTML, 텍스트 파일 등의 데이터를 주고 받을 수 있다.
• HTML, JavaScript, XML 지식을 요구한다.
• Ajax 프레임워크로는 Prototype, script.aculo.us, dojo, jQuery 등을 사용한다.

장단점

1. 장점

   • 웹 페이지 전체를 다시 로딩하지 않아도 웹 페이지 일부분만을 갱신할 수 있도록 해준다.
   • 웹 페이지가 로드된 후에 서버로 데이터를 주고 받을 수 있다.
   • 백그라운드 영역에서 서버로 데이터를 보낼 수 있다.

2. 단점

   • Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하기 때문에 서버 푸시 방식의 실시간 서비스는 만들 수 없다.
     • 클라이언트 풀링 : 사용자가 직접 원하는 정보를 서버에게 요청하여 얻는 방식
     • 서버 푸시 : 사용자가 요청하지 않아도 서버가 알아서 자동으로 특정 정보를 제공하는 방식
   • 바이너리 데이터를 보내거나 받을 수 없다.
   • Ajax 스크립트가 포함되지 않은 서버로 Ajax 요청을 보낼 수 없다.
   • 클라이언트의 PC로 Ajax 요청을 보낼 수 없다.

동작 원리

XMLHttpRequest 객체

• Ajax의 가장 핵심적인 구성 요소로, 웹 브라우저가 서버와 데이터를 교환할 때 사용하는 객체다.
• 객체 생성은 인터넷 익스플로러(IE)에선 ActiveXObject 객체를 사용하여 생성하고, 그외의 브라우저에서는 XMLHttpRequest 객체를 사용한다.
  • 다만 현재는 IE를 자주 사용하지 않기에 참고.

var xhr = null;

function createRequest() {
	if (xhr != null) {
		return;
	}
	if (window.ActiveXObject) {
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	} else {
		xhr = new XMLHttpRequest();
	}
}

서버 요청 메소드

• HTTP(Hyper Text Transfer Protocol)#HTTP 요청 메서드 참고.
• 서버에 요청을 보내기 위해선 먼저 XMLHttpRequest 인스턴스를 생성하고, 인스턴스의 open() 메소드와 send() 메소드로 요청을 보낸다.

1. GET : 주소에 데이터를 추가하여 전달

   • 브라우저에 HTTP 요청이 캐시되어 저장됨
   • query string에 데이터를 포함시켜 전송하기 때문에 길이 제한이 있음
     • query string 참고.
   • 보안상 취약점이 존재하여 주의해야 한다.

2. POST : 데이터를 별도로 첨부하여 전달

   • 브라우저에 HTTP 요청이 캐시되지 않으며, 브라우저 히스토리에도 남지 않음
   • query string와 별도로 HTTP 요청 데이터를 전송하므로 길이 제한이 없음
   • GET보다 보안성이 높음
   • POST로 전송 시 request에 MIME type을 설정해야 하므로 html의 form의 기본 Context-Type인 application/x-www-form-urlencoded 형태(key=value&key=value)를 지정해야 함
     • setRequestHeader("Content-Type", "application/x-www-form-urlencoded") 설정 필요
     • Content-Type 헤더의 기본 값은 "text/html"로 설정되어 있어 사용하려는 파일 형태에 따라 변경할 필요가 있다.
     • 참고 자료 :

// 전송 메소드는 커스텀하여 만들 수 있음
// custom 가능
// url : 목적지
// param : 파라미터
// callback : 처리 후 돌아올 위치
// method : 전송방식(GET, POST)
function sendRequest(url, param, callback, method) {

	// HttpRequest 생성
	createRequest();

	// 전송 타입 구분
	// method 전달 시 대소문자을 섞어 쓰지 않도록 주의
	var httpMethod = (method != 'POST' && method != 'post') ? 'GET' : 'POST';

	// 파라미터 구분
	// 비어있는지 확인
	var httpParam = (param == null || param == '') ? null : param;

	// 접근 url
	var httpURL = url;

	// 요청 방식이 GET이고 전달할 파라미터가 있다면 새 url 경로 제작
	// query string에 param을 넣어 전달
	if (httpMethod == 'GET' && httpParam != null) {
		httpURL = httpURL+'?'+httParam;
	}

	// 서버로 보낼 Ajax 요청 형식
	xhr.open(httpMethod, httpURL, true);

	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

	// 작업이 완료된 후 호출할 callback 메소드 지정
	xhr.onreadystatechange=callback;

	// Ajax 요청을 서버로 전달
	// GET이면 send(), POST면 send("문자열")
	xhr.send(httpMethod == 'POST' ? httpParam : null);
}

서버 응답 확인

• Ajax에서 서버로부터의 응답을 확인할 때 XMLHttpRequest 객체의 property를 사용한다.

1. readyState : XMLHttpRequest 객체의 현재 상태를 나타냄

2. status : 서버의 문서 상태를 나타냄
   • HTTP(Hyper Text Transfer Protocol)#HTTP 상태 코드 참고.

3. onreadystatechange : XMLHttpRequest 객체의 readyState property의 값이 변할 때마다 자동으로 호출될 함수를 설정
   • 원하는 함수를 작성하여 XMLHttpRequest.onreadystatechange = 함수로 설정 가능
   • 서버에서 응답이 도착할 때까지 readyState property의 값에 따라 여러 번 호출될 수 있다.
4. onload : 로드가 완료되면 자동으로 호출할 함수를 설정

// xhr = new XMLHttpRequest()
function resultFn() {
	if (xhr.readyState == 4 && xhr.status == 200) { // Done, 서버에 문서가 존재함
		// 도착한 데이터를 읽어오기
		var data = xhr.responseText;
	}
}